<template>
	<view style="background-color: #900ff;">
		<cu-custom style="background-color: #231140;" class="bg-gradual-purple" :isBack="true">
			<block slot="content">小密书</block>
			<block slot="backText">返回</block>
		</cu-custom>

		<view class="content">
			<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
			<!-- <button @click="changeOption">切换</button> -->
		</view>
	</view>
</template>

<script>
	import cuCustom from '../../colorui/components/cu-custom.vue'
	import * as util from '../../js/utils.js'
	export default {
		data() {

			/* let dataList = util.getLocalStorage('data-list')
			if(!dataList) {
				dataList = []
			}
			
			let mpU = new Map()
			let mpP = new Map()
			for (let [k, v] of dataList.entries()) {
				v.pasd = util.decryptDes(v.pasd, 'nznb' + v.id + 'jjw')
				if(mpU.get(v.user))
				{
					mpU.get(v.user).push(v)
				}
				else{
					mpU.set(v.user,[v])
				}
				if(mpP.get(v.pasd))
				{
					mpP.get(v.pasd).push(v)
				}
				else{
					mpP.set(v.pasd,[v])
				}
			}
			
			let Uoption = []
			let Poption = []
			console.log(mpU,mpP)
			for (let [k,v] of mpU.entries()) {
				
				let data = {}
				data.name = k
				let children = []
				for (let [ck,cv] of v.entries()) {
					children.push({name:cv.pasd,value:1})
				}
				data.children = children
				Uoption.push(data)	
			}
			
			for (let [k,v] of mpP.entries()) {
				let data = {}
				data.name = k
				let children = []
				for (let [ck,cv] of v.entries()) {
					children.push({name:cv.user,value:1})
				}
				data.children = children
				Poption.push(data)
			}
			
			var Udata = Uoption
			var Pdata = Poption */
			let dataList = util.getLocalStorage('data-list')
			if (!dataList) {
				dataList = []
			}

			let mpU = new Map()
			let mpP = new Map()
			for (let [k, v] of dataList.entries()) {
				v.pasd = util.decryptDes(v.pasd, 'nznb' + v.id + 'jjw')
				if (mpU.get(v.user)) {
					mpU.get(v.user).push(v)
				} else {
					mpU.set(v.user, [v])
				}
				if (mpP.get(v.pasd)) {
					mpP.get(v.pasd).push(v)
				} else {
					mpP.set(v.pasd, [v])
				}
			}
			
			let Ud = []
			let Up = []
			for (let [k, v] of mpU.entries()) {
				Ud.push({name:k,value:v.length})
			}
			for (let [k, v] of mpP.entries()) {
				Up.push({name:k,value:v.length})
			}
			

			var itemStyle = {
				normal: {
					opacity: 0.7,
					color: {
						repeat: 'repeat',
						colorStops: [{
						        offset: 0, color: 'white' // 0% 处的颜色
						    }],
					},
					borderWidth: 3,
					borderColor: '#aaa'
				}
			};


			return {
				option: {
					tooltip: {
					        trigger: 'item',
					        formatter: '{a} <br/>{b}: {c} ({d}%)'
					    },
					backgroundColor: {
						colorStops: [{
						        offset: 0, color: 'white' // 0% 处的颜色
						    }],
						repeat: 'repeat'
					},
					title: {
						text: '账号密码统计',
						textStyle: {
							color: '#ffaaff'
						}
					},
					tooltip: {},
					series: [{
							name: '账号',
							type: 'pie',
							selectedMode: 'single',
							selectedOffset: 30,
							clockwise: true,
							center: ['50%', '20%'],
							radius:[0, '30%'],
							label: {
							                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}次 \n {per|{d}%}  ',
							                backgroundColor: '#eee',
							                borderColor: '#aaa',
							                borderWidth: 1,
							                borderRadius: 4,
							                // shadowBlur:3,
							                // shadowOffsetX: 2,
							                // shadowOffsetY: 2,
							                // shadowColor: '#999',
							                // padding: [0, 7],
							                rich: {
							                    a: {
							                        color: '#999',
							                        lineHeight: 22,
							                        align: 'center'
							                    },
							                    // abg: {
							                    //     backgroundColor: '#333',
							                    //     width: '100%',
							                    //     align: 'right',
							                    //     height: 22,
							                    //     borderRadius: [4, 4, 0, 0]
							                    // },
							                    hr: {
							                        borderColor: '#aaa',
							                        width: '100%',
							                        borderWidth: 0.5,
							                        height: 0
							                    },
							                    b: {
							                        fontSize: 16,
							                        lineHeight: 33
							                    },
							                    per: {
							                        color: '#eee',
							                        backgroundColor: '#334455',
							                        padding: [2, 4],
							                        borderRadius: 2
							                    }
							                }
							            },
							labelLine: {
								lineStyle: {
									color: '#000000'
								}
							},
							data: Ud,
							itemStyle: itemStyle,
							
						},
						{
							name: '密码',
							type: 'pie',
							selectedMode: 'single',
							selectedOffset: 30,
							clockwise: true,
							center: ['50%', '60%'],
							radius:[0, '30%'],
							label: {
							                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}次 \n {per|{d}%}  ',
							                backgroundColor: '#eee',
							                borderColor: '#aaa',
							                borderWidth: 1,
							                borderRadius: 4,
							                // shadowBlur:3,
							                // shadowOffsetX: 2,
							                // shadowOffsetY: 2,
							                // shadowColor: '#999',
							                // padding: [0, 7],
							                rich: {
							                    a: {
							                        color: '#999',
							                        lineHeight: 22,
							                        align: 'center'
							                    },
							                    // abg: {
							                    //     backgroundColor: '#333',
							                    //     width: '100%',
							                    //     align: 'right',
							                    //     height: 22,
							                    //     borderRadius: [4, 4, 0, 0]
							                    // },
							                    hr: {
							                        borderColor: '#aaa',
							                        width: '100%',
							                        borderWidth: 0.5,
							                        height: 0
							                    },
							                    b: {
							                        fontSize: 16,
							                        lineHeight: 33
							                    },
							                    per: {
							                        color: '#eee',
							                        backgroundColor: '#334455',
							                        padding: [2, 4],
							                        borderRadius: 2
							                    }
							                }
							            },
							labelLine: {
								lineStyle: {
									color: '#000000'
								}
							},
							data: Up,
							itemStyle: itemStyle
						},
					]
				}
			}
		},
		onLoad() {

		},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				console.log(options)
			}
		},
		components: {
			'cu-custom': cuCustom,
		},
		mounted() {

		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				console.log(event, ownerInstance)
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 800px;
	}
</style>
